<template>
	<div>
		<div class="row-me center-all bgcfff">
			<div class="mychart flex1 padding-left20">
				<h4>销售类别占比</h4>
				<div class="line-grey-heng"></div>
				<el-radio-group v-model="type" class="margin-top20 height40" @change="onChange">
					<el-radio-button label="1">昨日</el-radio-button>
					<el-radio-button label="2">今日</el-radio-button>
					<el-radio-button label="3">近30天</el-radio-button>
				</el-radio-group>
				<div class="height400" id="mychart" ref="mychart"></div>
			</div>
			<div class="width50"></div>
			<div class="mychart flex1 padding-left20">
				<h4>用户画像</h4>
				<div class="line-grey-heng"></div>
				<div class="height60"></div>
				<div class="height400" id="mychart" ref="mychart2"></div>
			</div>
		</div>
		<div class="row-me center-all bgcfff">
			<div class="mychart flex1 padding20 margin-top20">
				<div class="row-me space-between">
					<h4>在线人数趋势</h4>
					<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" @change="timeChange" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</div>
				<div class="row-me space-between">
					<div class="row-me row-center"><span class="color606266">平均时长</span>
						<h4>{{salesVolume3}}s</h4>
					</div>
					<div></div>
				</div>
				<div class="height400" id="mychart" ref="mychart3"></div>
			</div>
			<div class="width50"></div>
			<div class="mychart flex1 padding20 margin-top20">
				<h4>图书销售对比</h4>
				<div class="row-me space-between margin-left100 margin-right100 height60">
					<div>{{bookInfo.data1}} <span class="color606266">元</span></div>
					<div>{{bookInfo.data2}} <span class="color606266">单</span></div>
					<div>{{bookInfo.data3}} <span class="color606266">超时</span></div>
				</div>
				<div class="height400" id="mychart" ref="mychart4"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import Schart from 'vue-schart';
	export default {
		components: {
			Schart
		},
		data() {
			return {
				type: 1,
				type2: 1,
				date: [],
				ydata: [],
				ydata2: [],
				ydata3: [],
				ydata4: [],
				xdata: [],
				xdata2: [],
				salesVolume: '',
				salesVolume2: '',
				salesVolume3: '',
				bookInfo: []
			}
		},
		created() {
			this.getSaleCategoryRate()
			this.getUserStatistics()
			this.getOnlineUserStatistics()
			this.getBookSaleStatistics()
		},
		mounted() {
			this.appName = localStorage.getItem('appName') || ''
		},
		methods: {
			onChange(val) {
				this.getSaleCategoryRate()
			},
			onChange2(val) {
				this.getUserStatistics()
			},
			timeChange(val) {
				this.getOnlineUserStatistics()
			},
			async getSaleCategoryRate() {
				const res = await this.$get('/admin/workBench/getSaleCategoryRate', {
					type: this.type
				})
				this.salesVolume = res.data1
				this.ydata = []
				for (let item of res.data) {
					this.ydata.push({
						name: `${item.title}`,
						value: item.value2
					})
				}
				this.initEcharts()
			},
			async getUserStatistics() {
				const res = await this.$get('/admin/workBench/getUserStatistics', {
					type: this.type2
				})
				this.salesVolume2 = res.data1
				this.ydata2 = []
				for (let item of res.data) {
					this.ydata2.push({
						name: `${item.title}`,
						value: item.value
					})
				}
				this.initEcharts2()
			},
			async getOnlineUserStatistics() {
				let query = {}
				if (this.date && this.date.length != 0) {
					query.start = this.date[0]
					query.end = this.date[1]
				}
				const res = await this.$get('/admin/workBench/getOnlineUserStatistics', query)
				this.salesVolume3 = res.data1
				this.xdata = []
				this.topData = []
				this.ydata3 = []
				let values = ''
				let topData = ['小于90s', '90s-150s', '大于150s']
				for (let index in res.data) {
					let i = Number(index) + 1
					values = Array.from(res.data, (item) => item['value' + i])
					this.xdata.push({
						name: topData[index],
						type: 'bar',
						data: values
					})
					this.topData.push(topData[index])
					this.ydata3.push(res.data[index].title)
				}
				this.initEcharts3()
			},
			async getBookSaleStatistics() {
				const res = await this.$get('/admin/workBench/getBookSaleStatistics')
				this.bookInfo = res
				this.xdata2 = []
				this.ydata4 = []
				let arr = []
				for (let item of res.data) {
					arr.push(item.value)
					this.xdata2.push(item.title)
				}
				this.ydata4.push({
					name: '数据',
					type: 'bar',
					data: arr
				})
				this.initEcharts4()
			},
			initEcharts() {
				const option = {
					title: [{
						text: '销售额',
						subtext: this.salesVolume,
						textStyle: {
							fontSize: 20,
							color: "black"
						},
						subtextStyle: {
							fontSize: 20,
							color: 'black'
						},
						textAlign: "center",
						x: '34.5%',
						y: '44%',
					}],
					tooltip: {
						trigger: 'item',
						formatter: function(parms) {
							var str =
								"金额：" + parms.data.value + "</br>" +
								"占比：" + parms.percent + "%";
							return str;
						}
					},
					legend: {
						type: "scroll",
						orient: 'vertical',
						left: '70%',
						align: 'left',
						top: 'middle',
						textStyle: {
							color: '#8C8C8C'
						},
						height: 250
					},
					series: [{
						name: '标题',
						type: 'pie',
						center: ['35%', '50%'],
						radius: ['40%', '65%'],
						clockwise: false, //饼图的扇区是否是顺时针排布
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: true,
								position: 'outter',
								formatter: function(parms) {
									return parms.data.legendname
								}
							}
						},
						labelLine: {
							normal: {
								length: 5,
								length2: 3,
								smooth: true,
							}
						},
						data: this.ydata
					}]
				};
				const myChart = this.$echarts.init(this.$refs.mychart); // 图标初始化
				myChart.setOption(option); // 渲染页面
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			},
			initEcharts2() {
				const option = {
					title: [{
						text: '总人数',
						subtext: this.salesVolume2,
						textStyle: {
							fontSize: 20,
							color: "black"
						},
						subtextStyle: {
							fontSize: 20,
							color: 'black'
						},
						textAlign: "center",
						x: '34.5%',
						y: '44%',
					}],
					tooltip: {
						trigger: 'item',
						formatter: function(parms) {
							var str =
								"人数：" + parms.data.value + "</br>" +
								"占比：" + parms.percent + "%";
							return str;
						}
					},
					legend: {
						type: "scroll",
						orient: 'vertical',
						left: '70%',
						align: 'left',
						top: 'middle',
						textStyle: {
							color: '#8C8C8C'
						},
						height: 250,
						formatter: e => {
							var data = this.ydata2
							var total = 0;
							var val = 0;
							data.forEach(el => {
								total += el.value;
								if (e == el.name) val = el.value
							});
							return `${e}       ${val}`
						}
					},
					series: [{
						name: '标题',
						type: 'pie',
						center: ['35%', '50%'],
						radius: ['40%', '65%'],
						clockwise: false, //饼图的扇区是否是顺时针排布
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: true,
								position: 'outter',
								formatter: function(parms) {
									return parms.data.legendname
								}
							}
						},
						labelLine: {
							normal: {
								length: 5,
								length2: 3,
								smooth: true,
							}
						},
						data: this.ydata2
					}]
				};
				const myChart = this.$echarts.init(this.$refs.mychart2); // 图标初始化
				myChart.setOption(option); // 渲染页面
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			},
			initEcharts3() {
				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: {
						data: this.topData
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: this.ydata3
					}],
					yAxis: [{
						type: 'value'
					}],
					series: this.xdata
				};
				const myChart = this.$echarts.init(this.$refs.mychart3); // 图标初始化
				myChart.setOption(option); // 渲染页面
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			},
			initEcharts4() {
				const option = {
					tooltip: {
						trigger: 'axis'
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: true,
					xAxis: [{
						type: 'category',
						data: this.xdata2
					}],
					yAxis: [{
						type: 'value'
					}],
					series: this.ydata4
				}
				const myChart = this.$echarts.init(this.$refs.mychart4); // 图标初始化
				myChart.setOption(option); // 渲染页面
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			},
		}
	}
</script>

<style scoped>
	.bgcfff {
		background-color: #fff;
	}

	.mychart {
		box-shadow: 0px 1px 5px #888888;
		border-radius: 6px;
	}
</style>